<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<vue-warn :message="message"></vue-warn>
			<span>本例我们使用component方法来注册自定义一个组件，并支持参数绑定<br/></span>
			<vue-item v-bind:items="items1"></vue-item>
			
			<p>对于原生渲染的DOM，由于某些标签嵌套有特殊要求，自定义组件有可能被认为是非法的导致错误，可以使用is属性来变通</p>
			<table>
				<tr is="vue-trs"></tr>
			</table>
			
			<p>以下用法将引起原生DOM解析错误</p>
			<table>
				<vue-trs></vue-trs>
			</table>
			
			<vue-counter @click.native="clickCounter"></vue-counter>
			<vue-counter></vue-counter>
			<vue-counter v-on:click-total-plus="clickTotalPlus"></vue-counter>
		</div>
	</body>
<script type="text/javascript">
//要先注册组件再实例化
Vue.component('vue-item', {
	props: ['items'],  //props定义支持的参数绑定
	template: '<ul><li v-for="item in items">{{item.name}}</li></ul>'
});
var app = new Vue({
	el: '#app',
	data: {
		items1: [
			{name: "高等数学"},
			{name: "大学英语"},
			{name: "心理教育"}
		],
		message: "鬼知道我经历了什么"
	},
	//components属性用于定义私有组件
	components: {
		'vue-warn': {
			props: ['message'],
			template: '<span class="warn-span">发生错误啦！~{{message}}<br/></span>'
		},
		'vue-trs': {
			template: '<tbody><tr><td>111</td><td>222</td><td>333</td></tr><tr><td>444</td><td>555</td><td>666</td></tr><tr><td>777</td><td>888</td><td>999</td></tr></tbody>'
		},
		'vue-counter': {
			data: function(){  //在组件里，data属性和实例有区别，组件的data属性必须为函数返回作为私有调用，否则报错。
				return {
					counter: 0
				};
			},
			template: '<button v-on:click="clickPlus()">{{ counter }}(点击我+1)</button>',
			methods: {
				clickPlus: function(){
					this.counter += 1;
					this.$emit('click-total-plus');  //由于属性名不区分大小写，所以你不能写成clickTotalPlus
				}
			}
		}
	},
	methods: {
		clickTotalPlus: function(){
			console.log("你点什么点");
		},
		clickCounter: function(){
			console.log("需要使用native装饰符才能调用子组件的顶部DOM原生事件");
			console.log("你又点什么点");
		}
	}
});
</script>
</html>
